<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div">
        <span>{{msg}}</span>
        <table border="1px" width="20%">
            <tr>
                <!--
                    对于对象:
                    value为值,index为属性

                    对于数组或list容器:
                    value为值,index为索引
                -->
                <td v-for="(value,index) in student">
                    {{index}}
                </td>
            </tr>
            <tr>
                <td v-for="(value,index) in student">
                    {{value}}
                </td>
            </tr>
            <tr>
                <td v-for="(value,index) in personList">
                    {{value.name}}
                </td>
            </tr>
            <tr>
                <td v-for="(value,index) in personList">
                    {{index}}
                </td>
            </tr>
        </table>
    </div>
</body>
<script src="js/vue.js" ></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:'hello vue',
            student:{
                id:1,
                name:'张三',
                age:20
            },
            personList:[
                {
                    id:1,
                    name:'张三',
                    age:20
                },
                {
                    id:2,
                    name:'李四',
                    age:18
                },
                {
                    id:3,
                    name:'王五',
                    age:22
                }
            ]
        }
    })
</script>
</html>